<template>
  <div class="add-train">
    <div class="backto">
      <el-button circle icon="el-icon-arrow-left" @click="$router.go(-1)"></el-button>
      <span style="margin-left:20px;">返回</span>
    </div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="火车ID" prop="trainId">
        <el-input v-model="ruleForm.trainId"></el-input>
      </el-form-item>
      <el-form-item label="火车类型" prop="trainType">
        <el-input v-model="ruleForm.trainType"></el-input>
      </el-form-item>
      <el-form-item label="出发站" prop="start">
        <el-input v-model="ruleForm.start"></el-input>
      </el-form-item>
      <el-form-item label="到达站" prop="end">
        <el-input v-model="ruleForm.end"></el-input>
      </el-form-item>
      <el-form-item label="出发时间" prop="startTime">
        <el-input v-model="ruleForm.startTime"></el-input>
      </el-form-item>
      <el-form-item label="车厢数" prop="carriage">
        <el-input v-model="ruleForm.carriage"></el-input>
      </el-form-item>
      <el-form-item label="最大时速" prop="maxSpeed">
        <el-input v-model="ruleForm.maxSpeed"></el-input>
      </el-form-item>
      <el-form-item label="座位数" prop="seatCount">
        <el-input v-model="ruleForm.seatCount"></el-input>
      </el-form-item>
      <el-form-item label="里程" prop="mileage">
        <el-input v-model="ruleForm.mileage"></el-input>
      </el-form-item>
      <el-form-item label="区间价格" prop="persitePrice">
        <el-input v-model="ruleForm.persitePrice"></el-input>
      </el-form-item>
      <el-form-item label="总时长" prop="totalMin">
        <el-input v-model="ruleForm.totalMin"></el-input>
      </el-form-item>
      <el-form-item label="总天数" prop="totalDay">
        <el-input v-model="ruleForm.totalDay"></el-input>
      </el-form-item>
      <el-form-item label="车站信息" prop="stationInfos">
        <el-select v-model="ruleForm.stationInfos" multiple placeholder="按经过顺序选择" class="select-diy">
          <el-option
            v-for="item in options"
            :key="item.stationId"
            :label="item.stationName"
            :value="item.stationName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "AddTrain",
  data() {
    return {
      ruleForm: {
        trainId: "",
        trainType: "",
        start: "",
        end: "",
        startTime: "",
        carriage: "",
        maxSpeed: "",
        seatCount: "",
        mileage: "",
        persitePrice: "",
        totalDay: "",
        totalMin: "",
        stationInfos: []
      },
      options: [],
      rules: {
        trainId: [{ required: true, message: "请输入列车ID", trigger: "blur" }],
        trainType: [
          { required: true, message: "请输入列车类型", trigger: "blur" }
        ],
        start: [{ required: true, message: "请输入出发站", trigger: "blur" }],
        end: [{ required: true, message: "请输入终点站", trigger: "blur" }],
        startTime: [
          { required: true, message: "请输入出发时间", trigger: "blur" }
        ],
        carriage: [
          { required: true, message: "请输入车厢数", trigger: "blur" }
        ],
        maxSpeed: [
          { required: true, message: "请输入最大时速", trigger: "blur" }
        ],
        seatCount: [
          { required: true, message: "请输入座位数", trigger: "blur" }
        ],
        mileage: [{ required: true, message: "请输入里程", trigger: "blur" }],
        persitePrice: [
          { required: true, message: "请输入区间价格", trigger: "blur" }
        ],
        totalMin: [
          { required: true, message: "请输入总时长（分钟）", trigger: "blur" }
        ],
        totalDay: [{ required: true, message: "请输入总天数", trigger: "blur" }]
      }
    };
  },
  mounted(){
    this.getStationList()
  },
  methods: {
    async getStationList() {
      const res = await this.$http.get("/admin/station/stationList");
      if (res.data.code === 0) {
        this.total = res.data.data.count;
        this.options = res.data.data.stationList;
      }
    },
    async save(data){
      const res = await this.$http.post('/admin/train/save', data)
      if(res.data.code === 0){
        this.$message.success(res.data.msg)
      }
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.ruleForm.stationInfos = JSON.stringify(this.ruleForm.stationInfos)
            this.save(this.ruleForm)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  },
};
</script>
<style lang="less" scoped>
.add-train {
  .backto {
    margin: 10px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .demo-ruleForm {
    width: 500px;
    margin: 0 auto;
  }
  .select-diy{
    width: 100%;
  }
}
</style>